<template>
	<div class="pages">
		<el-container class="page-container">
			<div class="container-right">
				<!-- 搜索框 -->
				<el-form class="page-form" ref="form" :model="sizeForm" label-width="80px" size="mini">
					<el-form-item label="日期:" style="width:500px">
						<el-col :span="8">
							<el-date-picker type="date" placeholder="选择开始日期" v-model="sizeForm.date1"
								style="width: 100%;"></el-date-picker>
						</el-col>
						<el-col class="line" :span="2">至</el-col>
						<el-col :span="8">
							<el-date-picker type="date" placeholder="选择结束日期" v-model="sizeForm.date2"
								style="width: 100%;"></el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="姓名:">
						<el-input v-model="sizeForm.name"></el-input>
					</el-form-item>
					<el-form-item label="身份证号:">
						<el-input v-model="sizeForm.idCard"></el-input>
					</el-form-item>
					<el-button type="primary" @click="onSubmit">搜索</el-button>
					<el-button type="success" @click="exportExcel">导出筛选结果</el-button>
					<el-upload class="uploadFile"
						ref="UploadImport"
						action 
						:auto-upload="false"
						:show-file-list="false"
						:on-change="UploadImport"
						:limit="1"
						accept=".xls, .xlsx">
						<el-button type="warning">Excel导入</el-button>
					</el-upload>
					<el-button type="info"  @click="dialogVisible = true" style="backgroundColor:#440e25;">单个病人信息导入</el-button>
					<!-- 单人导入 -->
					<el-dialog title="单个病人信息导入"
						:visible.sync="dialogVisible"
						width="25%"
						:before-close="handleClose"
						>
						<div style="height:500px;">
							<el-form ref="alertform" :rules="rules" :model="alertform" label-width="100px" style="height:400px;display:flex;justify-content:space-around; flex-wrap:wrap;">
								<el-form-item label="设备号"  prop="id"  autocomplete="off" style="width:400px" :rows="400">
									<el-col :span="400">
										<el-input v-model="alertform.id" ></el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="姓名" prop="name" style="width:400px" :rows="400">
									<el-col :span="400">
										<el-input v-model="alertform.name"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="身份证号" prop="idCard" style="width:400px" :rows="400">
									<el-col :span="400">
										<el-input v-model="alertform.idCard"></el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="来访时间" prop="time" style="width:400px" :rows="400">
									<el-col :span="400">
										<el-date-picker :picker-options="pickerOptions" type="date" placeholder="选择日期" v-model="alertform.time" style="width: 100%;"></el-date-picker>
									</el-col>
								</el-form-item>
								<el-form-item label="体温" prop="temp" style="width:400px" :rows="400">
									<el-col :span="400">
										<el-input v-model="alertform.temp">
											<i slot="suffix">&#8451;</i>
										</el-input>
									</el-col>
								</el-form-item>
								<el-form-item label="健康码状态" prop="state" style="width:400px" :rows="400">
									<el-select v-model="alertform.state" placeholder="请选择健康码状态">
									<el-option label="红码" value="0"></el-option>
									<el-option label="黄码" value="1"></el-option>
									<el-option label="绿码" value="2"></el-option>
									</el-select>
								</el-form-item>
							</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="exit" style="margin: 0 20px; height:100%;">取消</el-button>
							<el-button style="margin: 0 20px;background-color:#409EFF; border-color:#409EFF;color:#fff;" @click="alertconfirm('alertform')">提交</el-button>
						</div>
						</div>
						
						</el-dialog>
						<!-- 单人导入 -->
				</el-form>
				<!-- 表格 -->
				<el-table id="out-table" :data="tableData" class="fixed-cloumn" height="600" border
					:header-cell-style="{textAlign: 'center',background:'#a5adc4',color:'#fff'}"
					v-loading="tableLoading"
					element-loading-text="拼命加载中"
					element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(0, 0, 0, 0.8)"
					>
					<el-table-column prop="id" label="设备号">
					</el-table-column>
					<el-table-column prop="name" label="姓名">
					</el-table-column>
					<el-table-column prop="idCard" label="身份证号">
					</el-table-column>
					<el-table-column prop="time" label="来访时间">
					</el-table-column>
					<el-table-column prop="temp" label="体温" width="300">
					</el-table-column>
					<el-table-column prop="state" label="健康码状态" width="120">
					</el-table-column>
				</el-table>
			</div>
		</el-container>
	</div>
</template>

<script>
	/* import {
		ADD_COUNTER
	} from '../store/mutation-types.js'*/
	import {
		mapGetters
	} from 'vuex' 
	import axios from "axios"
	import FileSaver from 'file-saver';
	import * as XLSX from 'xlsx';

	export default {
		name: 'pages1',
		data() {
			return {
				// tableLoading
				tableLoading:false,
				sizeForm: {
					date1: '',
					date2: '',
					name: '',
					idCard: ''
				},
				rules:{
					id:[
						{ required: true, message: '请输入设备号', trigger: 'blur' },
            			{ min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
					],
					name:[
						{ required: true, message: '请输入姓名', trigger: 'blur' },
            			{ min: 3, max: 5, message: '姓名长度在 3 到 5 个字符', trigger: 'blur' }
					],
					idCard:[
						{ required: true, message: '请输入身份证号', trigger: 'blur' },
						{ pattern: /^\d{8,18}$/, message: '身份证验证格式不准确' },
					],
					time:[
						{ required: true, message: '请选择日期', trigger: 'blur' },
					],
					temp:[
						{ required: true, message: '请输入体温', trigger: 'blur' },
						// { min: 3, max: 5, message: '姓名长度在 3 到 5 个字符', trigger: 'blur' },
					],
					state:[
						{ required: true, message: '请选择健康码状态', trigger: 'blur' },
					]
				},
				fileData:[],
				tableData: [{
						id: 'YYYFJNGM123456',
						name: '王小虎',
						idCard: '367291999900000000000',
						time: '2021-01-26 13:14:45',
						temp: '36.2',
						state: '红码'
					},
					{
						id: 'YYYFJNGM123456',
						name: '王小虎',
						idCard: '367291999900000000000',
						time: '2021-01-27 13:14:45',
						temp: '36.1',
						state: '红码'
					}
				],
				title:"",
				dialogVisible: false,
				alertform:{
					id: '',
					name: '',
					time:'',//来访时间
					state:'',//健康码状态
					temp:"",//体温
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				pickerOptions: {
					disabledDate: (time) => {
					// 设置可选择的日期为今天之后的一个月内
					const curDate = (new Date()).getTime()
					// 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
					const day = 10 * 24 * 3600 * 1000
					const dateRegion = curDate - day
					return time.getTime() > Date.now() - 8.64e7 || 
						time.getTime() < dateRegion
					}
				}
			}
		},
		computed: {
			//第一种写法
			...mapGetters(['cartLength', 'cartList'])
			// 第二种写法
			// ...mapGetters({
			// 	length:'cartLength',
			// 	list:'cartList'
			// })
		},
		destroyed() {
			// this.$store.state.commit(ADD_COUNTER);
			console.log("destroyed")
		},
		deactivated() {
			console.log("deactivated")
		},
		activated() {
			console.log("activated")
		},
		methods: {
			onSubmit() {
				
			},
			//导出excel表格
			exportExcel() {
				/*
				sizeForm: {
					date1: '',
					date2: '',
					name: '',
					idCard: ''
				}, 
				 */
			// 处理表名
					
				if (this.sizeForm.date1) {
					this.title = this.title+ ""+this.formatData(this.sizeForm.date1);
				}
				if (this.sizeForm.date2) {
					this.title = this.title+ "-"+this.formatData(this.sizeForm.date2);
				}
				if (this.sizeForm.name) {
					this.title = this.title+ "-"+this.sizeForm.name;
				}
				if (this.sizeForm.idCard) {
					this.title = this.title+ "-"+this.sizeForm.idCard;
				}
				if(!this.sizeForm.date1&&!this.sizeForm.date2&&!this.sizeForm.name&&!this.sizeForm.idCard){
					this.title = this.title+this.formatData()
				}
				this.title = this.title+ "筛选结果";
				var xlsxParam = {
					raw: true
				}
				var wb = XLSX.utils.table_to_book(
					document.querySelector('#out-table'),
					xlsxParam
				)
				var wbout = XLSX.write(wb, {
					bookType: 'xlsx',
					bookSST: true,
					type: 'array'
				})
				try {
					FileSaver.saveAs(
						new Blob([wbout], {
							type: 'application/octet-stream'
						}),
						this.title + '.xlsx'
					)
				} catch (e) {
					if (typeof console !== 'undefined') console.log(e, wbout)
				}
				return wbout
			},
			// 弹出框
			 handleClose(done) {
				this.$confirm('确认关闭？')
				.then(_ => {
					done();
				})
				.catch(_ => {});
			},
			// 
			// 导入 上传 xlsx 事件
			UploadImport(file, fileList) {
				this.fileData = file; // 保存当前选择文件
				this.readExcel(); // 调用读取数据的方法
			},
			// 处理日期
			formatData(i){
				if(i){
					var dat = new Date(i);
				}else{
					var dat = new Date();
				}
				let month = dat.getMonth()+1;
				let day = dat.getDate();
				return month+"月"+day+"日"
			},
			// 读取数据
			readExcel() {
				let that = this;
				const files = that.fileData;
				if (!files) {
					//如果没有文件
					return false;
				} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
					this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
					return false;
				}
				const fileReader = new FileReader();
				fileReader.onload = ev => {
					try {
						const data = ev.target.result;
						const workbook = XLSX.read(data, {
							type: "binary"
						});
						if (workbook.SheetNames.length >= 1) {
							this.$message({
								message: "导入数据表格成功",
								showClose: true,
								type: "success"
							});
						}
						this.tableLoading=true;
						let that = this;
						setTimeout(()=>{
							that.tableLoading=false;
						},3000)
						this.$message({
							showClose: true,
							message: "提交成功",
							type: 'success',
							duration:1500
						});
						//取第一张表
						const wsname = workbook.SheetNames[0]; 
						//生成json表格内容
						const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); 
						// console.log(ws)
						ws.forEach((item)=>{
							console.log(item["430525198112303000 "]);
							console.log(item["欧阳文思"]);
							// http://10.68.207.31:3001/appb/Gyhjkmxxcxjk.htm?zjhm=330227196802146023&xm=唐雪芬
							axios.get("/api/appb/Gyhjkmxxcxjk.htm?xm="+item["欧阳文思"]+"&zjhm="+item["430525198112303000 "]).then((res)=>{
								console.log(res);
							})
						})
						// 清空已上传的文件
			  	        this.$refs["UploadImport"].clearFiles();
				} 
				catch (e) {
			  	  return false;
			 	}
			};
				// 如果为原生 input 则应是 files[0]
				fileReader.readAsBinaryString(files.raw);
				console.log(files.raw);
			},
			// 弹出表单的取消
			exit(){
				this.dialogVisible = false;
			},
			// 弹出表单的确认
			alertconfirm(formName){
				this.$refs[formName].validate((valid) => {
				if (valid) {
					this.tableLoading=true;
					let that = this;
					setTimeout(()=>{
						that.tableLoading=false;
					},3000)
					this.$message({
						showClose: true,
						message: "提交成功",
						type: 'success',
						duration:1500
					});
					this.alertform={
						id: '',
						name: '',
						time:'',//来访时间
						state:'',//健康码状态
						temp:"",//体温
						delivery: false,
						type: [],
						resource: '',
						desc: ''
					}
					this.dialogVisible = false;
				} else {
					// console.log('error submit!!');
					this.$message({
						showClose: true,
						message: "内容验证失败",
						type: 'error',
						duration:1500
					});
					return false;
				}
				});

				
				
			},
		},
	}
</script>

<style scoped>
	.pages {
		width: 100%;
		height: calc(100vh -110px);
		overflow: hidden;
	}

	.page-container {
		width: 100%;
		height: calc(100vh -110px);
	}

	.page-aside {
		width: 150px;
		height: 100%;
		border-right: solid 1px #e6e6e6;
	}

	.container-right {
		width: 100%;
		height: calc(100vh -110px);
	}

	.page-form {
		display: flex;
		height: 100px;
		align-items: center;
	}

	.el-form-item {
		margin-bottom: 0;
		margin-right: 15px;
	}

	>>>.el-form-item--mini .el-form-item__content,
	>>>.el-form-item--mini .el-form-item__label {
		line-height: 36px;
	}

	>>>.el-input--mini .el-input__inner {
		height: 36px;
		line-height: 36px;
	}

	.el-col-2 {
		text-align: center;
	}

	.el-button--primary {
		margin: 0;
		padding: 0;
		width: 60px;
		height: 36px;
		line-height: 36px;
	}

	.el-table {
		width: 95%;
		margin: 0 auto;
	}

	>>>.el-table--enable-row-transition .el-table__body td.el-table__cell {
		width: 16.7%;
		text-align: center;
	}
	.dialog-footer{
		display: flex;
		flex-direction: row-reverse;
	}
</style>
